<template>
  <div class="body">
    <div class="body-1">
      <img
        src="../../assets/images/mine-tou.png"
        alt=""
        @click="gotoregister"
      />
      <div class="body-1-1">
        <p class="p1">六元怀里的柴柴</p>
        <p class="p2">
          <span>66</span>
          <span>66</span>
        </p>
        <p class="p3">
          <span>关注</span>
          <span>粉丝</span>
        </p>
      </div>
    </div>
    <div class="sankuang">
      <div class="k1" @click="gotopifu">
        <div class="k1-1">
          <p></p>
          <p>肤质变化</p>
        </div>
        <img src="../../assets/images/mine-fuzhi.png" alt="" />
      </div>
      <div class="k2" @click="gotocefu">
        <div class="k1-1">
          <p></p>
          <p>测肤图像</p>
        </div>
        <img src="../../assets/images/mine-cefutuxiang.png" alt="" />
      </div>
      <div class="k3">
        <div class="k1-1">
          <p></p>
          <p>测一测历史</p>
        </div>
        <img src="../../assets/images/mine-lishi.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    gotocefu() {
      this.$router.push("/home/cefu/");
    },
    gotopifu() {
      this.$router.push("/home/pifu/");
    },
    gotoregister() {
      this.$router.push("/register/");
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  height: 527px;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;

  .body-1 {
    display: flex;

    img {
      width: 148px;
      height: 148px;
      margin-left: 35px;
      margin-top: 49px;
      margin-right: 44px;
    }

    .body-1-1 {
      margin-top: 71px;

      .p1 {
        width: 250px;
        height: 30px;
        font-size: 32px;
        font-family: Adobe Heiti Std;
        font-weight: bold;
        color: #000000;
        letter-spacing: 3px;
      }
      .p2 {
        margin-top: 53px;
        padding-left: 5px;
        height: 25px;
        margin-left: 41px;
        span {
          font-size: 32px;
          margin-right: 131px;
          font-family: DIN;
          font-weight: bold;
          color: #000000;
        }
      }

      .p3 {
        margin-top: 18px;
        height: 50px;
        margin-left: 41px;
        span {
          width: 47px;
          height: 23px;
          font-size: 24px;
          font-family: PingFang;
          font-weight: bold;
          color: #8c8c8c;
          margin-right: 125px;
        }
      }
    }
  }

  .sankuang {
    height: 211px;
    width: 100%;
    margin-top: 49px;
    display: flex;

    .k1 {
      width: 241px;
      height: 100%;
      background: url(../../assets/images/bac.png);
      background-size: 100%;
      margin-left: 9px;
      border-radius: 10px;

      .k1-1 {
        display: flex;

        p:nth-child(1) {
          width: 4px;
          height: 25px;
          background: #64c8c8;
          border-radius: 2px 2px 0px 0px;
          margin-right: 15px;
          margin-top: 46px;
          margin-left: 43px;
        }
        p:nth-child(2) {
          width: 120px;
          height: 29px;
          font-size: 28px;
          font-family: PingFang;
          font-weight: bold;
          color: #000000;
          margin-top: 42px;
        }
      }

      img {
        width: 89px;
        height: 91px;
        margin-left: 120px;
        margin-top: 4px;
      }
    }

    .k2 {
      width: 241px;
      height: 100%;
      background: url(../../assets/images/bac.png);
      background-size: 100%;
      border-radius: 10px;
      .k1-1 {
        display: flex;

        p:nth-child(1) {
          width: 4px;
          height: 25px;
          background: #64c8c8;
          border-radius: 2px 2px 0px 0px;
          margin-right: 15px;
          margin-top: 46px;
          margin-left: 43px;
        }
        p:nth-child(2) {
          width: 120px;
          height: 29px;
          font-size: 28px;
          font-family: PingFang;
          font-weight: bold;
          color: #000000;
          margin-top: 42px;
        }
      }

      img {
        width: 89px;
        height: 91px;
        margin-left: 120px;
        margin-top: 4px;
      }
    }

    .k3 {
      width: 241px;
      height: 100%;
      background: url(../../assets/images/bac.png);
      background-size: 100%;
      border-radius: 10px;
      .k1-1 {
        display: flex;

        p:nth-child(1) {
          width: 4px;
          height: 25px;
          background: #64c8c8;
          border-radius: 2px 2px 0px 0px;
          margin-right: 15px;
          margin-top: 46px;
          margin-left: 43px;
        }
        p:nth-child(2) {
          width: 150px;
          height: 29px;
          font-size: 28px;
          font-family: PingFang;
          font-weight: bold;
          color: #000000;
          margin-top: 42px;
        }
      }

      img {
        width: 89px;
        height: 91px;
        margin-left: 120px;
        margin-top: 4px;
      }
    }
  }
}
</style>
